<template>
    <div class="login-container">
        <!-- 背景装饰 -->
        <div class="background-decoration">
            <div class="decoration-circle circle-1"></div>
            <div class="decoration-circle circle-2"></div>
            <div class="decoration-circle circle-3"></div>
        </div>

        <div class="login-content">
            <!-- 左侧信息区域 -->
            <div class="login-info">
                <div class="info-content">
                    <div class="logo-section">
                        <div class="logo-icon">
                            <el-icon :size="60" color="#409EFF">
                                <Operation />
                            </el-icon>
                        </div>
                        <h1 class="system-title">MES制造执行系统</h1>
                        <p class="system-subtitle">Manufacturing Execution System</p>
                    </div>

                    <div class="features-list">
                        <div class="feature-item">
                            <el-icon color="#67C23A">
                                <CircleCheck />
                            </el-icon>
                            <span>智能生产管理</span>
                        </div>
                        <div class="feature-item">
                            <el-icon color="#E6A23C">
                                <DataAnalysis />
                            </el-icon>
                            <span>实时数据分析</span>
                        </div>
                        <div class="feature-item">
                            <el-icon color="#F56C6C">
                                <Tools />
                            </el-icon>
                            <span>设备状态监控</span>
                        </div>
                        <div class="feature-item">
                            <el-icon color="#909399">
                                <Setting />
                            </el-icon>
                            <span>灵活系统配置</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧登录表单 -->
            <div class="login-form-container">
                <el-card class="login-card" shadow="always">
                    <template #header>
                        <div class="card-header">
                            <h2>用户登录</h2>
                            <p>欢迎使用MES管理系统</p>
                        </div>
                    </template>

                    <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" class="login-form" size="large">
                        <!-- 用户名 -->
                        <el-form-item prop="username">
                            <el-input v-model="loginForm.username" placeholder="请输入用户名" prefix-icon="User" clearable
                                @keyup.enter="handleLogin" />
                        </el-form-item>

                        <!-- 密码 -->
                        <el-form-item prop="password">
                            <el-input v-model="loginForm.password" type="password" placeholder="请输入密码"
                                prefix-icon="Lock" show-password clearable @keyup.enter="handleLogin" />
                        </el-form-item>

                        <!-- 记住密码和忘记密码 -->
                        <el-form-item class="form-options">
                            <div class="options-row">
                                <el-checkbox v-model="loginForm.remember">记住密码</el-checkbox>
                                <el-link type="primary" :underline="false" @click="handleForgotPassword">
                                    忘记密码？
                                </el-link>
                            </div>
                        </el-form-item>

                        <!-- 登录按钮 -->
                        <el-form-item>
                            <el-button type="primary" class="login-button" :loading="loginLoading" @click="handleLogin">
                                <span v-if="!loginLoading">登录</span>
                                <span v-else>登录中...</span>
                            </el-button>
                        </el-form-item>

                        <!-- 其他登录方式 -->
                        <div class="other-login">
                            <el-divider>其他登录方式</el-divider>
                            <div class="social-login">
                                <el-button circle @click="handleSocialLogin('wechat')">
                                    <el-icon color="#07C160">
                                        <ChatDotRound />
                                    </el-icon>
                                </el-button>
                                <el-button circle @click="handleSocialLogin('dingtalk')">
                                    <el-icon color="#1E80FF">
                                        <MessageBox />
                                    </el-icon>
                                </el-button>
                                <el-button circle @click="handleSocialLogin('sso')">
                                    <el-icon color="#F56C6C">
                                        <Key />
                                    </el-icon>
                                </el-button>
                            </div>
                        </div>
                    </el-form>

                    <!-- 注册链接 -->
                    <div class="register-link">
                        <span>还没有账号？</span>
                        <el-link type="primary" :underline="false" @click="handleRegister">
                            立即注册
                        </el-link>
                    </div>
                </el-card>
            </div>
        </div>

        <!-- 底部信息 -->
        <div class="login-footer">
            <p>&copy; 2024 MES制造执行系统. All rights reserved.</p>
            <div class="footer-links">
                <el-link type="info" :underline="false">隐私政策</el-link>
                <el-divider direction="vertical" />
                <el-link type="info" :underline="false">服务条款</el-link>
                <el-divider direction="vertical" />
                <el-link type="info" :underline="false">技术支持</el-link>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus'
import {
    Operation,
    CircleCheck,
    DataAnalysis,
    Tools,
    Setting,
    ChatDotRound,
    MessageBox,
    Key
} from '@element-plus/icons-vue'

const router = useRouter()

// 表单引用
const loginFormRef = ref<FormInstance>()

// 登录表单数据
const loginForm = reactive({
    username: 'admin',
    password: '123456',
    remember: false
})

// 登录状态
const loginLoading = ref(false)

// 表单验证规则
const loginRules = {
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
    ]
}

// 处理登录
const handleLogin = async () => {
    if (!loginFormRef.value) return

    try {
        // 验证表单
        await loginFormRef.value.validate()

        loginLoading.value = true

        // 模拟登录请求
        await new Promise(resolve => setTimeout(resolve, 1500))

        // 简单的用户验证（实际项目中应该调用后端API）
        if (loginForm.username === 'admin' && loginForm.password === '123456') {
            // 登录成功，保存登录状态
            localStorage.setItem('isLoggedIn', 'true')
            localStorage.setItem('username', loginForm.username)

            if (loginForm.remember) {
                // 如果选择记住密码，可以保存加密后的密码
                localStorage.setItem('rememberedUser', JSON.stringify({
                    username: loginForm.username,
                    // 注意：实际项目中不应该明文保存密码
                }))
            }

            ElMessage.success('登录成功！')

            // 检查是否有重定向路径
            const redirect = router.currentRoute.value.query.redirect as string
            router.push(redirect || '/mes')

        } else {
            ElMessage.error('用户名或密码错误')
        }

    } catch (error) {
        console.error('登录失败:', error)
        if (error instanceof Error) {
            ElMessage.error('登录失败，请重试')
        }
    } finally {
        loginLoading.value = false
    }
}

// 处理忘记密码
const handleForgotPassword = () => {
    ElMessageBox.prompt('请输入您的邮箱地址', '找回密码', {
        confirmButtonText: '发送重置邮件',
        cancelButtonText: '取消',
        inputPattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
        inputErrorMessage: '请输入有效的邮箱地址'
    }).then(({ value }) => {
        ElMessage.success(`重置密码邮件已发送至: ${value}`)
    }).catch(() => {
        ElMessage.info('已取消操作')
    })
}

// 处理社交登录
const handleSocialLogin = (type: string) => {
    const typeMap: Record<string, string> = {
        wechat: '微信',
        dingtalk: '钉钉',
        sso: 'SSO单点登录'
    }
    ElMessage.info(`${typeMap[type]}登录功能开发中...`)
}

// 处理注册
const handleRegister = () => {
    ElMessage.info('注册功能开发中...')
}
</script>

<style scoped>
.login-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 背景装饰 */
.background-decoration {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.decoration-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    animation: float 6s ease-in-out infinite;
}

.circle-1 {
    width: 200px;
    height: 200px;
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.circle-2 {
    width: 300px;
    height: 300px;
    top: 60%;
    right: 10%;
    animation-delay: 2s;
}

.circle-3 {
    width: 150px;
    height: 150px;
    bottom: 20%;
    left: 60%;
    animation-delay: 4s;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(180deg);
    }
}

/* 主要内容区域 */
.login-content {
    position: relative;
    z-index: 10;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* 左侧信息区域 */
.login-info {
    flex: 1;
    max-width: 500px;
    margin-right: 60px;
    color: white;
}

.info-content {
    padding: 40px 0;
}

.logo-section {
    text-align: center;
    margin-bottom: 60px;
}

.logo-icon {
    margin-bottom: 20px;
}

.system-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 20px 0 10px 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.system-subtitle {
    font-size: 1.2rem;
    opacity: 0.9;
    margin: 0 0 40px 0;
}

.features-list {
    display: grid;
    gap: 20px;
}

.feature-item {
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 500;
}

.feature-item .el-icon {
    margin-right: 15px;
    font-size: 20px;
}

/* 右侧登录表单 */
.login-form-container {
    flex-shrink: 0;
    width: 420px;
}

.login-card {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.card-header {
    text-align: center;
    padding: 10px 0;
}

.card-header h2 {
    margin: 0 0 10px 0;
    font-size: 1.8rem;
    font-weight: 600;
    color: #2c3e50;
}

.card-header p {
    margin: 0;
    color: #7f8c8d;
    font-size: 0.9rem;
}

.login-form {
    padding: 20px 0;
}

.form-options {
    margin-bottom: 10px;
}

.options-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.login-button {
    width: 100%;
    height: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 25px;
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
    transition: all 0.3s;
}

.login-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(64, 158, 255, 0.4);
}

.other-login {
    margin-top: 20px;
    text-align: center;
}

.social-login {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
}

.social-login .el-button {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    transition: all 0.3s;
}

.social-login .el-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.register-link {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #ebeef5;
    color: #909399;
    font-size: 0.9rem;
}

/* 底部信息 */
.login-footer {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 20px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

.footer-links {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
}

.footer-links .el-link {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

/* 响应式设计 */
@media (max-width: 1024px) {
    .login-content {
        flex-direction: column;
        justify-content: flex-start;
        padding: 20px;
    }

    .login-info {
        margin-right: 0;
        margin-bottom: 40px;
        max-width: 100%;
    }

    .system-title {
        font-size: 2rem;
    }

    .features-list {
        display: none;
    }

    .login-form-container {
        width: 100%;
        max-width: 400px;
    }
}

@media (max-width: 768px) {
    .login-content {
        padding: 20px 15px;
    }

    .system-title {
        font-size: 1.8rem;
    }

    .login-form-container {
        max-width: 350px;
    }

    .decoration-circle {
        display: none;
    }
}

@media (max-width: 480px) {
    .login-content {
        padding: 15px 10px;
    }

    .login-form-container {
        width: 100%;
        max-width: 320px;
    }

    .login-card {
        border-radius: 15px;
    }

    .system-title {
        font-size: 1.5rem;
    }
}
</style>
